<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
    <!-- 先引入 Vue -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">

        <el-container>
                <el-aside width="150px">
                    <el-input v-model="q" placeholder="搜索一下">
                          <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>

                      <el-menu @select="onActive" :default-active="active">
                          <el-menu-item v-for="o of tables" :key="o.id" :index="o.id">
                          {{o.label}}
                          </el-menu-item>
                      </el-menu>

                </el-aside>
                <el-main>


                    <iframe v-if="active" style="width:100%;height:1200px"  frameborder="0"  :src="url"></iframe>



                </el-main>
            </el-container>


  </div>
</body>

  <script>


    new Vue({
      el: '#app',
      data(){
        return {
            q:'',
            list:[{
                id:'',
                label:'',
            }],
            active:'',
            http:null,
        }
    },

    computed:{
        url(){
            return `/${this.active}/swagger-ui.html`;
        },
        vo(){
            for(let o of this.list){
                if(o.id == this.active){
                    return o;
                }
            }
            return {};
        },
        tables(){
            if(this.q == ''){
                return this.list;
            }else{
                return this.list.filter(x => {

                    return x.label.indexOf(this.q) != -1;
                })
            }
        },
    },
    created(){

        this.init();
    },
    methods:{
        onActive(val){

            this.active = val;
        },
        async init(){
            let {data} = await axios({
                url:'/server/page'
            })
            this.list = data;
            console.log(list)
        },
    }
    })
  </script>
</html>